<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-todo</title>
</head>
<body>
    <div id="app">
      <div class="newTask">
          <label>输入待办事项</label>
          <input type="text" v-model="newTodo" @keypress.enter="addToDo">
          <button class="btn-add" @click="addToDo">添加</button>
      </div>
      <ul class="todos">
          <li v-for="todo in todoList">
            <input type="checkbox" v-model="todo.done">{{todo.title}}
            <span v-if="todo.done">已完成</span>
            <span v-else>未完成</span>
            <!--<span>{{todo.createdAt.toLocalString()}}</span>-->
            <button class="btn-del" @click="removeToDo(todo)">删除</button>
          </li>
      </ul>
    </div>    
    <script type="text/javascript" src="bundle.js"></script> 
</body>
</html>